<template>
  <section class="app-main">
    <NavBar />
    <div class="app-main-content">
      <router-view>
        <template #default="{ Component, route }">
          <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
            <component :is="Component" :key="route.path" />
          </transition>
        </template>
      </router-view>
    </div>
  </section>
</template>
<script setup lang="ts">
import NavBar from '../NavBar/index.vue'
</script>
<style lang="scss" scoped>
.app-main {
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 0;
  &-content {
    padding: 20px;
    height: calc(100% - 60px);
    overflow: hidden;
  }
  /* 布局切换动画优化 */
  &.animate__animated {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }

  &.animate__fadeOut {
    animation-timing-function: ease-in;
  }

  &.animate__fadeIn {
    animation-timing-function: ease-out;
  }
}
</style>
